/*
 * 网格navs组件
 * @Author: ljb
 * @Date: 2018-11-14 09:10:18
 * @Last Modified by: kanglin
 * @Last Modified time: 2019-03-05 10:20:09
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    @import '~src/assets/css/common.less';

    .v-component-grid-navs {
        .navs-container {
            .single-nav {
                display: inline-block;
                min-width: 100*@rem-per-px;
                padding: 16*@rem-per-px 0 20*@rem-per-px;
                box-sizing: border-box;
                cursor: pointer;
                .nav-icon {
                    width: 80*@rem-per-px;
                    height: 80*@rem-per-px;
                    margin: 0 auto;
                    overflow: hidden;
					font-size: 0;
					img {
						width: 100%;
						height: 100%;
					}
                }
                .text {
                    line-height: 28*@rem-per-px;
                    margin-top: 8*@rem-per-px;
                    font-size: 20*@rem-per-px;
					text-align: center;
					color: #BBBDC0;
                }
            }
        }
    }

</style>
<template>
	<div class="v-component-grid-navs">
		<div class="navs-container">
			<div
				v-for="nav in navs"
				:key="nav.id"
				:style="`width: ${100/navCount}%;`"
				class="single-nav"
				@click="$emit('link', nav.link)">
				<div class="nav-icon">
					<img
						:src="nav.image"
						alt="icon">
				</div>
				<p class="text">{{ nav.title }}</p>
			</div>
		</div>
	</div>
</template>

<script>
/**
 * 首页导航栏(网格navs组件)
 * @vue-prop {Array} navs navs数据对象
 * @vue-prop {Number} [navCount=5] 一行显示多少个nav
 */

export default {
	name: 'GridNavs',
	props: {
		navs: {
			type: Array,
			required: true,
		},
		navCount: { // 一行显示多少个nav，太大的话会不生效，每个icon的块设置了最小宽度
			type: Number,
			default() {
				return 5;
			},
		},
	},
	data() {
		return {

		};
	},
	methods: {
	},
};
</script>
